<template>
    <v-app>
        <v-main>
            <v-container fluid fill-height>
                <v-layout align-center justify-center>
                    <v-flex xs12 sm8 md4>
                        <v-card class="elevation-12">
                            <v-toolbar dark color="primary">
                                <v-toolbar-title>Kang后台管理</v-toolbar-title>
                                <v-spacer></v-spacer>
                            </v-toolbar>
                            <v-card-text>
                                <v-form>
                                    <v-text-field prepend-icon="mdi-account" v-model="username" label="用户名"
                                                  type="text"/>
                                    <v-text-field
                                            prepend-icon="mdi-lock"
                                            v-model="password"
                                            label="密码"
                                            id="password"
                                            :append-icon="show ? 'mdi-eye' : 'mdi-eye-off'"
                                            @click:append="show = !show"
                                            :type="show ? 'text' : 'password'"
                                    ></v-text-field>
                                </v-form>
                            </v-card-text>
                            <v-card-actions>
                                <v-spacer></v-spacer>
                                <v-btn color="primary" @click="doLogin">登录</v-btn>
                            </v-card-actions>
                        </v-card>
                    </v-flex>
                </v-layout>
            </v-container>
        </v-main>
        <v-snackbar
                v-model="dialog"
                :timeout="timeout"
                centered
        >
            {{msg}}
        </v-snackbar>
    </v-app>
</template>

<script>
    export default {
        name: "Login",
        data() {
            return {
                show: false,
                msg: '',
                dialog: false,
                timeout: 1000,
                username: 'admin',
                password: '123456',
            }
        },
        methods: {
            doLogin() {
                if (this.username === '' || this.password === '') {
                    this.msg = '用户名或密码不能为空';
                    this.dialog = true;
                } else {
                    this.axios.post('/login', {
                        'username': this.username,
                        'password': this.password
                    }).then(response => {
                        // 登陆成功
                        // 存储token到本地
                        localStorage.setItem("Authorization", response.headers.authorization);
                        // 跳转到首页
                        this.$router.push("/").then(onComplete => {
                            // console.log(onComplete);
                        });
                    }).catch(function (error) {
                        console.log(error);
                    })
                }
            }
        }
    }
</script>

<style scoped>

</style>